<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom元素获取</title>
</head>

<body>
    <div>我是一个div</div>
    <div>我是二个div</div>

    <script>
        // 获取单个元素
        const div = document.querySelector('div');
        // 打印 dom 对象，建议用console.dir
        // console.dir(div);
        console.log(div);
        setTimeout(() => {
            div.innerHTML = '我被修改了';
        }, 2000);

        //  获取多个元素
        // 有 length 属性，有 forEach
        // 但是没有 push，filter 等数组的其他方法
        // 所以他叫做【伪数组】，有 length 属性，通过下标取值
        const divs = document.querySelectorAll('div');
        setTimeout(() => {
            divs.forEach(item => {
                item.innerHTML = '我们都被修改了';
                item.style.color = 'red';
            })
        }, 5000);
    </script>
</body>

</html>